import React from 'react';
import { Card, Row, Col, Statistic } from 'antd';
import { UserOutlined, ShoppingCartOutlined, DollarOutlined } from '@ant-design/icons';

const HomePage: React.FC = () => {
  return (
    <div>
      <h1 style={{ marginBottom: '24px' }}>欢迎来到管理后台</h1>
      
      {/* 数据统计卡片 */}
      <Row gutter={16} style={{ marginBottom: '24px' }}>
        <Col span={6}>
              <Card>
                <Statistic
                  title="用户总数"
                  value={1280}
                  prefix={<UserOutlined />}
                  suffix="人"
                  valueStyle={{ color: '#3f8600' }}
                />
              </Card>
            </Col>
            <Col span={6}>
              <Card>
                <Statistic
                  title="今日访问"
                  value={240}
                  prefix={<ShoppingCartOutlined />}
                  suffix="次"
                  valueStyle={{ color: '#cf1322' }}
                />
              </Card>
            </Col>
            <Col span={6}>
              <Card>
                <Statistic
                  title="总收入"
                  value={125600}
                  prefix={<DollarOutlined />}
                  suffix="元"
                  valueStyle={{ color: '#1677ff' }}
                />
              </Card>
            </Col>
            <Col span={6}>
              <Card>
                <Statistic
                  title="数据概览"
                  value={98}
                  suffix="%"
                  valueStyle={{ color: '#722ed1' }}
                />
              </Card>
            </Col>
      </Row>
      
      {/* 主要内容区域 */}
      <Row gutter={16}>
        <Col span={16}>
          <Card title="系统概览" variant="outlined" style={{ height: '400px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <p style={{ fontSize: '18px', color: '#666' }}>这里将显示系统的主要数据图表</p>
          </Card>
        </Col>
        <Col span={8}>
          <Card title="最近活动" variant="outlined" style={{ height: '400px' }}>
            <ul style={{ listStyle: 'none', padding: 0 }}>
              <li style={{ padding: '12px 0', borderBottom: '1px solid #f0f0f0' }}>用户 admin 登录系统</li>
              <li style={{ padding: '12px 0', borderBottom: '1px solid #f0f0f0' }}>数据统计模块已更新</li>
              <li style={{ padding: '12px 0', borderBottom: '1px solid #f0f0f0' }}>系统维护计划已发布</li>
              <li style={{ padding: '12px 0', borderBottom: '1px solid #f0f0f0' }}>新增用户权限配置</li>
              <li style={{ padding: '12px 0' }}>版本更新提醒</li>
            </ul>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default HomePage;